<template>
    <view class="container">
        <uni-list class="setting-list">
            <uni-list-item showArrow title="手机号" link="redirectTo" to="/pages/setting/newphone/newphone" :rightText="formatPhoneNumber(userInfo.phone) || '未绑定'" />
            <uni-list-item showArrow title="微博" :rightText="userInfo.weibo || '未绑定'" />
            <uni-list-item showArrow title="微信" :rightText="userInfo.wechat || '未绑定'" />
            <uni-list-item showArrow title="QQ" :rightText="userInfo.qq || '未绑定'" />
        </uni-list>
        <uni-list class="setting-list">
            <uni-list-item title="系统通知" :show-switch="true"  @switchChange="switchChange"/>
            <uni-list-item showArrow title="检查新版本" />
            <uni-list-item title="清除缓存" rightText="18M" />
        </uni-list>
        <button type="default" class="logout-btn" @click="logout">
            <text class="logout-text">退出账号</text>
        </button>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 存储用户信息
const userInfo = ref({});

// 获取用户信息的函数
const fetchUserInfo = async () => {
    uni.request({
        method: 'GET',
        url: 'http://localhost:9100/api/user/selectById',
        header: {
            'bece_token': uni.getStorageSync('bece_token')
        },
        success: (res) => {
            console.log(res.data);
            if (res.data.code === 200) {
                userInfo.value = res.data.data;
            } else {
                uni.showToast({
                    title: res.data.msg,
                    duration: 2000
                });
            }
        },
        fail: (err) => {
            uni.showToast({
                title: '网络请求失败',
                icon: 'none',
                duration: 2000
            });
            console.error('请求出错:', err);
        }
    });
};

const formatPhoneNumber = (phone) => {
    if (!phone) return '';
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
};

// 页面加载时获取用户信息
onMounted(() => {
    fetchUserInfo();
});

// 退出账号
const logout = async () => {
    uni.showModal({
        title: '提示',
        content: '您确定要退出账号吗？',
        confirmText: '确定',
        cancelText: '取消',
        success: (res) => {
            if (res.confirm) {
                // 用户点击了确定，执行退出操作
                uni.request({
                    method: 'POST', 
                    url: 'http://localhost:9100/api/user/logout',
                    header: {
                        'bece_token': uni.getStorageSync('bece_token')
                    },
                    success: (res) => {
                        console.log(res.data);
                        if (res.data.code === 200) {
                            uni.removeStorageSync('bece_token');
                            uni.redirectTo({
                                url: '/pages/login/login'
                            });
                        } else {
                            uni.showToast({
                                title: res.data.msg || '退出登录失败',
                                duration: 2000
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '网络请求失败，请稍后重试',
                            duration: 2000
                        });
                        console.error('退出登录请求出错:', err);
                    }
                });
            } else if (res.cancel) {
                // 用户点击了取消，不执行任何操作
                console.log('用户取消了退出操作');
            }
        }
    });
};

// 系统通知开关变化的处理函数
const switchChange = (e) => {
    console.log('系统通知开关状态变化:', e.detail.value);
};

// const phone = () => {
//     uni.switchTab({
//         url: '/pages/setting/newphone/newphone',
//     });
// };

</script>

<style scoped>
page{
    background-color: #f2f2f2;
}	
.setting-list{
    margin-top: 20rpx;
}

.uni-list-item__content-title{
    font-size: 30rpx !important;
}

.uni-list-item__extra-text{
    font-size: 30rpx !important;
    color: black !important;
}

.logout-btn{
    margin-top:60rpx;
    background-color: #fff ;
}	 

.logout-text{
    color:red;
    font-size:30rpx;
}
</style>